<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Webpixels">
    <title>登录飞鱼</title>
    <!-- Preloader -->
    <style>
        @keyframes hidePreloader {
            0% {
                width: 100%;
                height: 100%;
            }

            100% {
                width: 0;
                height: 0;
            }
        }

        /*body>div.preloader {*/
        /*    position: fixed;*/
        /*    background: white;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    z-index: 1071;*/
        /*    opacity: 0;*/
        /*    transition: opacity .5s ease;*/
        /*    overflow: hidden;*/
        /*    pointer-events: none;*/
        /*    display: flex;*/
        /*    align-items: center;*/
        /*    justify-content: center;*/
        /*}*/

        /*body:not(.loaded)>div.preloader {*/
        /*    opacity: 1;*/
        /*}*/

        /*body:not(.loaded) {*/
        /*    overflow: hidden;*/
        /*}*/

        /*body.loaded>div.preloader {*/
        /*    animation: hidePreloader .5s linear .5s forwards;*/
        /*}*/
    </style>
    <script>
        // window.addEventListener("load", function() {
        //     setTimeout(function() {
        //         document.querySelector('body').classList.add('loaded');
        //     }, 300);
        // });
    </script>
    <link rel="stylesheet" type="text/css" href="/css/external/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="css/external/fontcss/bootstrap.icons.css" >
    <link rel="stylesheet" type="text/css" href="css/index.css" >
    <!-- Favicon -->
    <link rel="stylesheet" href="/css/all_min.css">
    <!-- Quick CSS -->
    <link rel="stylesheet" href="/css/quick-website.css" id="stylesheet">
</head>

<body class="body-container">
<!--<div class="modal fade" tabindex="-1" role="dialog" id="modal-cookies" data-backdrop="false" aria-labelledby="modal-cookies" aria-hidden="true">-->
<!--    <div class="modal-dialog modal-dialog-aside left-4 right-4 bottom-4">-->
<!--        <div class="modal-content bg-dark-dark">-->
<!--            <div class="modal-body">-->
<!--                &lt;!&ndash; Text &ndash;&gt;-->
<!--                <p class="text-sm text-white mb-3">-->
<!--                    We use cookies so that our themes work for you. By using our website, you agree to our use of cookies.-->
<!--                </p>-->
<!--                &lt;!&ndash; Buttons &ndash;&gt;-->
<!--                <a href="pages/utility/terms.html" class="btn btn-sm btn-white" target="_blank">Learn more</a>-->
<!--                <button type="button" class="btn btn-sm btn-primary mr-2" data-dismiss="modal">OK</button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!-- Main content -->
<div >
    <div class="container d-flex flex-column">
        <div class="row align-items-center justify-content-center min-vh-100">
            <div class="col-md-6 col-lg-5 col-xl-5 py-6 py-md-0">
                <div class="card shadow zindex-100 mb-0">
                    <div class="card-body px-md-5 py-5">
                        <div class="mb-5">
                            <h6 class="h3">飞鱼聊天</h6>
                            <p class="text-muted mb-0" style="text-align: center;font-size: 22px">飞鱼<i class="bi bi-send"></i></p>
                        </div>
                        <span class="clearfix"></span>
                        <form>
                            <div class="form-group">
                                <label class="form-control-label">用户</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="bi bi-person"></i></span>
                                    </div>
<!--                                    <input type="email" class="form-control" id="input-email" placeholder="用户名">-->
                                    <input class="form-control" type="text" id="username" name="username" placeholder="请输入用户名" required
                                           autofocus>
                                </div>
                            </div>
                            <div class="form-group mb-0">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <label class="form-control-label">密码</label>
                                    </div>
                                    <div class="mb-2">
                                        <a href="#" class="small text-muted text-underline--dashed border-primary" data-toggle="password-text" data-target="#input-password">Show password</a>
                                    </div>
                                </div>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="bi bi-key"></i></span>
                                    </div>
<!--                                    <input type="password" class="form-control" id="input-password" placeholder="Password">-->
                                    <input type="password" id="password" name="password" class="form-control"
                                           placeholder="请输入密码" required>
                                </div>
                            </div>
                            <div class="mt-4">
                                <button id="loginbutton" type="button" class="btn btn-block btn-primary">登录</button></div>
                        </form>
                    </div>
                    <div class="card-footer px-md-5"><small>未注册?</small>
                        <a href="/register" class="small font-weight-bold">创建用户</a></div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/js/external/bootstrap.bundle.min.js"></script>
<script src="/js/external/jquery.js"></script>
<script src="/js/external/jquery_confirm.min.js"></script>


<!-- Core JS  -->
<!--<script src="assets/libs/jquery/dist/jquery.min.js"></script>-->
<!--<script src="assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>-->
<script src="/js/external/svg-injector.min.js"></script>
<!-- Quick JS -->
<script src="/js/external/quick-website.js"></script>
<script src="/js/external/md5.min.js"></script>

<script src="/js/external/bootstrapValidator.js"></script>
<!-- Feather Icons -->
<script>
    // feather.replace({
    //     'width': '1em',
    //     'height': '1em'
    // })



    $(document).ready(function () {
        $("#loginbutton").click(function () {
            if( $("#password").val() == '' ||$("#username").val() == '' || $("#password").val() == null ||$("#username").val() == null || $("#password").val() == undefined ||$("#username").val() == undefined){
                return
            }
            $.get("/login?username=" + $("#username").val() + "&password=" + md5($("#password").val()), function (data, textStatus, request) {
                if (data.code == 0) {
                    var param = encodeURI($("#username").val())
                    let token = request.getResponseHeader("token")
                    window.localStorage.setItem($("#username").val() + "_token", token);
                    window.localStorage.setItem($("#username").val()  + "_data", JSON.stringify(data.data));
                    window.location.href = "chatroom?username=" + param
                } else {
                    $.confirm({
                        title: '登录失败',
                        content: data.message,
                        autoClose: 'cancelAction|3000',
                        buttons: {
                            cancelAction: {
                                text: "确认",
                                function() {
                                }
                            }
                        }
                    });

                }



            })

        })


        $("#login-form").bootstrapValidator({
            message: 'This value is not valid',
            // 表单框里右侧的icon
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            submitHandler: function (validator, form, submitButton) {
                // 表单提交成功时会调用此方法
                // validator: 表单验证实例对象
                // form  jq对象  指定表单对象
                // submitButton  jq对象  指定提交按钮的对象
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {     //不能为空
                            message: '用户名不能为空'
                        },

                    }
                },
                password: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },

                tel: {
                    message: '电话号验证失败',
                    validators: {
                        notEmpty: {
                            message: '电话号不能为空'
                        },
                        regexp: {   //正则验证
                            regexp: /^1\d{10}$/,
                            message: '请输入正确的电话号'
                        },
                    }
                },
                checkNum: {
                    message: '验证码不能为空',
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        },


                    }
                },


            }
        });


    });




    function registerUser() {
        window.location.href = "/register"

    }
    function fastLogin() {
        // $("#fastcard").show()
        // $("#logincard").hide()
        // $("#fastbutton").hide()
        // $("#backbutton").show()
    }
    function backLogin() {
        $("#fastcard").hide()
        $("#logincard").show()
        $("#fastbutton").show()
        $("#backbutton").hide()
    }
    function getcheckcode() {
        $.get("/getcheckcode?tel=" + $("#tel").val()), function (data) {
            if(data.code==0){
                $("#checkcodebutton").hide()
                $("#countTime").show()
                $("#countTime").val("60s")
                var time = 59
                var interval = setInterval(function () {
                    $("#countTime").val(time + "s")
                    time--;
                    if (time == -1) {
                        clearInterval(interval)
                        $("#checkcodebutton").show()
                        $("#countTime").hide()
                    }
                }, 1000)
            }else{

                $.confirm({
                    title: '发送验证码失败',
                    content: data.message,
                    autoClose: 'cancelAction|3000',
                    buttons: {
                        cancelAction: {
                            text: "确认",
                            action: function() {
                            }
                        }
                    }
                });

            }
        }



    }

    function fastloginbutton() {
        // $.get("/fastlogin?tel=" + $("#tel").val()+"&checkNum="+$("#checkNum").val()), function (data) {
        //     if(data.code == 0){
        //         var param = encodeURI(data.data.userName)
        //         let token = request.getResponseHeader("token")
        //         window.localStorage.setItem(data.data.userName + "_token", token);
        //         window.location.href = "chatroom?username=" + param
        //     }else{
        //         $.confirm({
        //             title: '提示',
        //             content: data.message,
        //             autoClose: 'cancelAction|3000',
        //             buttons: {
        //                 cancelAction: {
        //                     text: "确认",
        //                     function() {
        //                     }
        //                 }
        //             }
        //         });
        //     }
        //
        // }

    }

</script>
</body>

</html>